$alert-background-color: #e6f7ff;
$alert-border: 1px solid #91d5ff;
$alert-success-background-color: #f6ffed;
$alert-success-border: 1px solid #b7eb8f;
$alert-danger-background-color: #fff2f0;
$alert-danger-border: 1px solid#ffccc7;
$alert-warning-background-color: #fffbe6;
$alert-waring-border: 1px solid#ffe58f;

.origin-alert {
  position: relative;
  padding: 8px 15px;

  .origin-alert-content {
    padding-right: 8px;
  }
  .origin-alert-message {
    display: block;
    margin-bottom: 4px;
    color: rgba(0, 0, 0, 0.85);
    font-size: 16px;
  }
  .origin-alert-description {
    font-size: 14px;
    line-height: 22px;
  }
  .origin-alert-closable {
    position: absolute;
    top: 8px;
    right: 15px;
    margin-left: 8px;
    padding: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 12px;
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    &:focus {
      outline: none;
    }
  }
}

.origin-alert-default {
  @include alert-style($alert-background-color, $alert-border);
}
.origin-alert-success {
  @include alert-style($alert-success-background-color, $alert-success-border);
}
.origin-alert-danger {
  @include alert-style($alert-danger-background-color, $alert-danger-border);
}
.origin-alert-warning {
  @include alert-style($alert-warning-background-color, $alert-waring-border);
}
